@fluentui/react-compose

@fluentui/react-compose

Composition functionality for Fluent UI

This functionality is in the experimental stage and should never be used in production as APIs might change before final release.

Usage

Currently supported only by functional components in @fluentui/react-northstar.

To import compose and use:

import { Button } from '@fluentui/react-northstar';
import { compose } from '@fluentui/react-compose';

const PrimaryButton = compose(Button, {
  className: 'ui-primary-button',
  displayName: 'PrimaryButton',

  mapPropsToStylesProps: props => ({ compact: props.compact }),

  handledProps: ['compact'],
  overrideStyles: true,
});

• className overrides a className that we will be assigned to the root slot of a component
• displayName modifies a React's displayName for component, it will be also used as a selector for styles overrides in your theme
• mapPropsToStylesProps passes additional design terms to styles functions
• handledProps is an array of props that will not be bypassed to the component's root slot
• overrideStyles indicates should the component will use only its own styles or will merge those with parent's